<template>
	<view>
		<view v-if="tishi" style="position: absolute;width: 550rpx;height: 70rpx;border-top-right-radius: 15rpx;border-top-left-radius: 15rpx;top: 320rpx;left: 100rpx;padding-right: 20rpx;padding-left: 20rpx;padding-top: 10rpx;font-size: 22rpx;letter-spacing: 5rpx;background-color: #eb5c20;text-align: center;line-height: 50rpx;">
						<text style="font-weight: 600;font-size: 30rpx;color: #ffffff;letter-spacing: 10rpx;">预定须知</text>
					</view>
					<view v-if="tishi" style="position: absolute;width: 550rpx;height: 530rpx;background-color: #ffffff;top: 390rpx;left: 100rpx;padding-right: 20rpx;padding-left: 20rpx;padding-top: 20rpx;font-size: 22rpx;letter-spacing: 5rpx;border-right-style: solid;border-right-width: 1rpx;border-right-color: #eb5c20;border-left-style: solid;border-left-width: 1rpx;border-left-color: #eb5c20;">
						<text>
							我们仅提供场地及相应设备设施,使用人须遵守治安管理条例,违者由使用人自行承担相应责任及后果。
							1.严禁未成年人进入场所。
							2.严禁黄、赌、毒打架斗殴等一切违法活动。
							3.使用人须自行对身体状况负责,注意个人安全。
							4.破坏或带走本场所提供的设备设施请照价赔偿。
							5.请自行保管好私人物品,如有遗失概不负责。
						</text>
					</view>
					<view v-if="tishi" style="position: absolute;width: 550rpx;height: 60rpx;background-color: #eb5c20;border-bottom-right-radius: 15rpx;border-bottom-left-radius: 15rpx;top: 890rpx;left: 100rpx;color: #ffffff;line-height: 60rpx;text-align: center;letter-spacing: 10rpx;" @click="sure()"><text>确定</text></view>
		<view class="topimage">
			<image :src="imageUrl"></image>
		</view>
		<view class="cut"></view>
		<view style="display: flex;height: 200rpx;">
			<view style="flex: 5;padding-left: 25rpx;padding-top: 15rpx;">
				<view class="machineName">
					<text>{{machineName}}</text>
				</view>
				<view class="desc">
					<text>{{desc}}</text>
				</view>
			</view>
			<view style="flex: 2;">
				<view class="status">
					<text>{{status | formatStatus}}</text>
				</view>
			</view>
		</view>
		<view class="cut" v-if="currentOrder.length>0"></view>
		<view class="currentOrder" v-if="currentOrder.length>0">
			<text style="font-size: 30rpx;font-weight: 400;color: #6c6c6c;">使用中：</text>
			<text >{{currentOrder[0].startTime}} - {{currentOrder[0].endTime}}</text>
		</view>
		<view class="cut" v-if="yuyueOrder.length>0"></view>
		<view class="currentOrder" v-if="yuyueOrder.length>0">
			<text style="font-size: 30rpx;font-weight: 400;color: #6c6c6c;">已预约：</text>
			<text>{{yuyueOrder[0].startTime}} - {{yuyueOrder[0].endTime}}</text>
		</view>
		
		<view class="cut"></view>
		<view class="selecttime">
			<text>时间选择</text>
		</view>
		<view class="time-content">
			<view class="start-time">
				<picker mode="multiSelector" :value="dateTime" @change="changeDateTime"
					@columnchange="changeDateTimeColumn" :range="dateTimeArray">
					<view v-if="isSale==0" class="sel-starttime">开始时间:{{timeStr}}
					</view>
				</picker>
				<view v-if="isSale==1" class="sel-starttime">开始时间:{{timeStr}}</view>
			</view>
			<view class="end-time">
				<view style="font-size: 24rpx;" class="sel-starttime">结束时间:{{endTime}}</view>
			</view>
		</view>
		<view class="selectmeal">
			<text>套餐选择</text>
		</view>
		<view class="mealinfo">
			<!-- <view class="colum">
				<view class="coulumdetail"><text>套餐</text></view>
				<view class="coulumdetail"><text>时长</text></view>
				<view class="coulumdetail"><text>价格</text></view>
			</view> -->
			<view :class="panduan==index ? 'colum-selected':'colum' " v-for="(item, index) in meals" :key="index" @click="changePrice(item,$event,index)">
				<view :class="panduan==index ? 'coulumdetail-selected':'coulumdetail'"><text>{{item.mealName}}</text></view>
				<view :class="panduan==index ? 'coulumdetail-selected':'coulumdetail'"><text>{{item.duration}}小时</text></view>
				<view :class="panduan==index ? 'coulumdetail-selected':'coulumdetail'"><text>{{item.price}}元</text></view>
			</view>
			<view style="height: 120rpx;"></view>
		</view>
		
		<view class="commit" @click="buyMeal()">
			<text>立即下单</text>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';

	import {
		mapState,
		mapMutations
	} from 'vuex';
	const {
		dateTimePicker,
		getMonthDay
	} = require('@/components/date.js');
	export default {
		data() {
			return {
				storeId: 0,
				meals: [],
				panduan: 0,
				machineName: '',
				price: 0,
				mealId: 0,
				deviceId: 0,
				showPicker: false,
				type: 'rangetime',
				value: '',
				endTime: '',
				times: [],
				isSale: 0,
				startTime: '',
				currentMeal: null,
				imageUrl: '',
				desc: '',
				currentOrder: [],
				yuyueOrder: [],
				mealName: '4小时',
				address: '',
				status: 0,
				dateTime: null,
				dateTimeArray: null,
				startYear: 2000,
				timeStr: '',
				tishi: true,
				dasaoTime: 0,
				device: null,
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			// console.log(options.dasaoTime)
			this.initTime()
			this.timeStr = this.dateFormat(new Date());
			// this.storeId = options.storeId;
			// this.desc = options.desc;
			// this.imageUrl = options.image;
			// this.status = options.status;
			// console.log(this.imageUrl)
			// this.machineName = options.machineName;
			this.deviceId = options.scene;
			// this.address = options.address;
			this.getDevice(this.deviceId);
			// this.dasaoTime = options.dasaoTime;
			this.getYuyueOrder();
		},
		filters: {
			formatStatus(status) {
				if (status == 0) {
					return '可预订'
				}
				if (status == 1) {
					return '使用中'
				}
				if (status == 2) {
					return '未打扫'
				}
				if (status == 3) {
					return '维护中'
				}
				if (status == 4) {
					return '已禁用'
				}
			}
		},
		methods: {
			async getDevice(deviceId) {
				let data = await Api.apiCall('get', Api.device.getDeviceById, {
					id: deviceId
				}); 
				if (data) {
					console.log(data)
					this.device = data.device;
					this.storeId = this.device.storeId;
					this.desc = this.device.deviceDesc;
					this.machineName = this.device.machineName;
					this.imageUrl = this.device.imageUrl;
					this.dasaoTime = this.device.dasaoTime;
					this.storeName = this.device.storeName;
					this.status = this.device.room.status;
				    this.getDeviceMeal(this.deviceId, this.dasaoTime);
				}
			},
			initTime() {
				let date = new Date();
				let endYear = date.getFullYear();
				this.startYear = endYear
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker(this.startYear, endYear);
				// 精确到分的处理，将数组的秒去掉
				let lastArray = obj.dateTimeArray.pop();
				let lastTime = obj.dateTime.pop();

				this.dateTimeArray = obj.dateTimeArray
				this.dateTime = obj.dateTime
				console.log(this.dateTimeArray)
				console.log(this.dateTime)
				// this.timeStr = this.createTimeStr(this.dateTimeArray, this.dateTime);
			},

			changeDateTime(e) {
				console.log(e)
				this.dateTime = e.detail.value;
				this.timeStr = this.createTimeStr(this.dateTimeArray, this.dateTime);
				this.endTime = '';
				console.log(this.timeStr)
				// var aa = this.createTimeStr(this.dateTimeArray, this.dateTime);
				// this.timeStr = aa.replace(/\.|\-/g, '/');
			},
			createTimeStr(dateTimeArray, dateTime) {
				console.log(dateTimeArray[2][dateTime[2]])
				let timeStr = dateTimeArray[0][dateTime[0]] + '/' + dateTimeArray[1][dateTime[1]] + '/' + dateTimeArray[2][
					dateTime[2]
				] + ' ' + dateTimeArray[3][dateTime[3]] + ":" + dateTimeArray[4][dateTime[4]];
				console.log(timeStr)
				return timeStr
			},
			/*年,月切换时重新更新计算*/
			changeDateTimeColumn(e) {
				//let {id} = e.target;
				let {
					column,
					value
				} = e.detail;
				if (column == 0 || column == 1) {
					//直接修改数组下标视图不更新,用深拷贝之后替换数组
					let dateTime = JSON.parse(JSON.stringify(this.dateTime));
					let dateTimeArray = JSON.parse(JSON.stringify(this.dateTimeArray));
					dateTime[column] = value;
					dateTimeArray[2] = getMonthDay(dateTimeArray[0][dateTime[0]], dateTimeArray[1][dateTime[1]]);
					this.dateTime = dateTime;
					this.dateTimeArray = dateTimeArray;
				}
			},
			dateFormat(date) {
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "/" + month + "/" + day + " " + hours + ":" + minutes;
			},
			sure() {
				this.tishi = false;
			},
			async getDeviceMeal(deviceId,dasaotime) {
				let params = {
					storeId: this.storeId,
					deviceId: deviceId
				}
				let data = await Api.apiCall('get', Api.device.getDeviceMeal, params);
				if (data) {
					console.log(data);
					this.meals = data;
					this.meal = this.meals[0]
					let time = this.addMinute(this.timeStr,dasaotime);
					console.log(dasaotime)
					this.endTime = this.addMinute(time,(this.meals[0].duration)*60);
					console.log(time)
					this.getCurrentOrder(dasaotime);
				}
			},
			async getCurrentOrder(dasaoTime) {
				let params = {
					deviceId: this.deviceId
				}
				let data = await Api.apiCall('get', Api.order.getCurrentOrder, params);
				if (data) {
					this.currentOrder = data;
					console.log(this.currentOrder)
					if (this.currentOrder.length > 0) {
						let newStartTime = new Date(this.currentOrder[0].endTime);
						this.timeStr = this.addMinute(newStartTime, dasaoTime);
						console.log(this.timeStr)
						this.endTime = this.addMinute(this.timeStr,(this.meals[0].duration)*60)
					}
				}
			},
			async getYuyueOrder() {
				let params = {
					deviceId: this.deviceId
				}
				let data = await Api.apiCall('get', Api.order.getYuyueOrder, params);
				if (data) {
					this.yuyueOrder = data;
				}
			},
			changePrice(item, e, index) {
				console.log(this.currentOrder.length)
				let i = new Date(this.timeStr).getTime();
				let j = new Date().getTime()
				if ((j - i) > 6000) {
					this.timeStr = this.dateFormat(new Date());
				}
				// if (this.currentOrder.length==0) {
				// 	this.timeStr = this.dateFormat(new Date());
				// }
				this.panduan = index
				console.log(e)
				if (item.isSale == 1) {
					this.isSale = 1;
					this.changePriceSale(item);
				} else {
					this.isSale = 0;
					let duration = item.duration;
					this.endTime = this.addDays(this.timeStr, duration);
					console.log(this.endTime)
					this.price = item.price;
					this.mealId = item.id;
					this.meal = item;
				}
			},
			async changePriceSale(item) {
				let duration = item.duration;
				this.endTime = this.addDays(this.datetime, duration);
				let params = {
					storeId: this.storeId,
					mealId: item.id
				}
				let data = await Api.apiCall('get', Api.device.saleMeal, params);
				if (data) {
					this.times = data;
					console.log(this.times);
					this.timeStr = this.times[0];
					this.endTime = this.times[1]
					this.price = item.price;
					this.mealId = item.id;
					this.meal = item;
				}
			},
			addDays(date, duration) {
				var nd = new Date(date);
				nd = nd.valueOf();
				nd = nd + duration * 60 * 60 * 1000;
				nd = new Date(nd);
				//alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
				var y = nd.getFullYear();
				var m = nd.getMonth() + 1;
				var d = nd.getDate();
				if (m <= 9) m = "0" + m;
				if (d <= 9) d = "0" + d;
				var hours = nd.getHours() < 10 ? "0" + nd.getHours() : nd.getHours();
				var minutes = nd.getMinutes() < 10 ? "0" + nd.getMinutes() : nd.getMinutes();
				var seconds = nd.getSeconds() < 10 ? "0" + nd.getSeconds() : nd.getSeconds();
				return y + "/" + m + "/" + d + " " + hours + ":" + minutes;;
			},
			addMinute(date, duration) {
				var nd = new Date(date);
				nd = nd.valueOf();
				nd = nd + duration * 60 * 1000;
				nd = new Date(nd);
				//alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
				var y = nd.getFullYear();
				var m = nd.getMonth() + 1;
				var d = nd.getDate();
				if (m <= 9) m = "0" + m;
				if (d <= 9) d = "0" + d;
				var hours = nd.getHours() < 10 ? "0" + nd.getHours() : nd.getHours();
				var minutes = nd.getMinutes() < 10 ? "0" + nd.getMinutes() : nd.getMinutes();
				var seconds = nd.getSeconds() < 10 ? "0" + nd.getSeconds() : nd.getSeconds();
				return y + "/" + m + "/" + d + " " + hours + ":" + minutes;;
			},
			async buyMeal() {
				let that = this;
				if(!that.hasLogin){
					uni.showModal({
						title: '提示',
						content: '请先授权登录.',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/public/login'
								});
							} else if (res.cancel) {
							}
						}
					});
					return false;
				}
				if (that.meal == null) {
					uni.showToast({
						icon: "error",
						title: '请选择套餐'
					})
					return false
				}
				let params = {
					deviceId: that.deviceId,
					storeId: that.storeId,
					mealId: that.meal.id,
					startTime: that.timeStr,
					endTime: that.endTime,
					price: that.meal.price,
					mealName: that.meal.mealName
				};
				if (that.isSale == 1) {
					if (that.timeStr == '' || that.endTime == '') {
						uni.showToast({
							icon: "error",
							title: '请选择套餐'
						})
						return false;
					}
				} else {
					if (that.timeStr == '' || that.endTime == '') {
						uni.showToast({
							icon: "error",
							title: '请选择套餐'
						})
						return false;
					}
				}
				this.checkProtect(params);
			},
			async checkIsIntersect(params) {
				let data = await Api.apiCall('post', Api.order.checkIsIntersect, params);
				if (data && data == 1) {
					uni.showModal({
						title: '订单时间冲突',
						content: '有客户正在预订付款，房间已被锁定,请稍后再次尝试',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {

							}
						}
					});
				} else {
					this.submit(params)
				}
			},
			async checkProtect(params) {
				//续费保护
				let data = await Api.apiCall('post', Api.order.checkProtect, params);
				let that = this;
				if (data && data == 1) {
					if (that.dasaoTime == 0) {
						uni.showModal({
							title: '订单时间冲突',
							content: '预约时间不得与其他用户冲突',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {} else if (res.cancel) {

								}
							}
						});
					} else {
						uni.showModal({
							title: '订单时间冲突',
							content: '预约时间不得与其他用户冲突,并且订单间需要预留【' + that.dasaoTime + '分钟】用于打扫',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {} else if (res.cancel) {

								}
							}
						});
					}
				} else {
					this.checkIsIntersect(params);
				}
			},
			async submit(params) {
				let date = new Date(this.timeStr + ':59');
				if (date.getTime() < new Date().getTime()) {
					if(this.meal.isSale==0){
						uni.showToast({
							icon: 'error',
							title: '开始时间无效'
						})
						return false;
					}else{
						//闲时单
						if(new Date().getTime() > new Date(this.endTime).getTime()){
							uni.showToast({
								icon: 'error',
								title: '闲时单不可用'
							})
							return false;
						}
					}
					
				}
				let data = await Api.apiCall('post', Api.order.createOrder, params);
				console.log(data);
				if (data) {
					let id = data.id;
					let url = `/pages/money/pay?id=${id}`;
					uni.redirectTo({
						url: url
					});
				} else {
					that.$core.msg(data);
				}
			}
		}
	}
</script>

<style lang="scss">
	.drug-list {
		width: 750rpx;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #333333;
		line-height: 44rpx;
	}

	.drug-listtext {
		font-weight: bold;
	}

	.drugtext {
		width: 690rpx;
		height: auto;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #666666;
		margin-bottom: 30rpx;
		/* text-indent: 2em; */
	}

	.cut {
		height: 10rpx;
		background-color: #d4d4d4;
	}
	
	.commit{
		height: 120rpx;
		width: 100%;
		background-color: #eb5c20;
		text-align: center;
		line-height: 120rpx;
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 600;
		letter-spacing: 18rpx;
		position: fixed;
		bottom: 0;
	}

	.topimage {
		width: 100%;
		height: 420rpx;
	}

	.topimage image {
		width: 100%;
		height: 100%;
	}

	.drug-explain {
		flex: 1;
		font-size: 28rpx;
		text-align: left;
		color: #666666;
		line-height: 52rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.colum {
		width: 95%;
		height: 70rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #eb5c20;
		border-radius: 8rpx;
		display: flex;
		margin-bottom: 15rpx;
	}
	
	.colum-selected{
		width: 95%;
		height: 70rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #eb5c20;
		background-color: #55aaff;
		border-radius: 8rpx;
		display: flex;
		margin-bottom: 15rpx;
		view{
			color: #ffffff;
		}
	}

	.drug-explain1 {
		flex: 1;
		font-size: 34rpx;
		text-align: left;
		font-weight: 900;
		color: #eb5c20;
		line-height: 52rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.drugtxt {
		display: flex;
		width: 690rpx;
		height: 250rpx;
		padding-top: 25rpx;
		padding-left: 25rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.drugexplain {
		width: 440rpx;
		height: 200rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.drugimg {
		width: 190rpx;
		height: 190rpx;
	}

	.machineName {
		font-weight: 600;
		color: #eb5c20;
		font-size: 36rpx;
		letter-spacing: 1rpx;
	}

	.selectmeal {
		height: 80rpx;
		background-color: #ffffff;
		font-size: 34rpx;
		color: #eb5c20;
		font-weight: 600;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 18rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #eb5c20
	}

	.selecttime {
		height: 80rpx;
		background-color: #ffffff;
		font-size: 34rpx;
		color: #eb5c20;
		font-weight: 600;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 18rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #eb5c20
	}

	.desc {
		font-size: 24rpx;
		color: #b0b0b0;
	}

	.drugimg image {
		width: 190rpx;
		height: 190rpx;
	}

	.status {
		height: 60rpx;
		width: 130rpx;
		background-color: #ffffff;
		border-radius: 4rpx;
		color: #b0b0b0;
		font-weight: 600;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		margin-top: 70rpx;
		margin-left: 20rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #b0b0b0;
	}

	.currentOrder {
		color: #6c6c6c;
		font-weight: 400;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 25rpx;
	}

	.mealinfo {
		// overflow: auto;
		padding-left: 34rpx;
		background-color: #ebebeb;
		padding-top: 15rpx;
		height: auto;
	}

	.drugtit {
		width: 690rpx;
		height: 86rpx;
		font-size: 32rpx;
		line-height: 86rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: bold;
	}

	.drugcontent {
		width: 750rpx;
		height: auto;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		background-color: #eb5c20;
	}

	.coulumdetail {
		flex: 1;
		text-align: center;
		background-color: #ffffff;
		color: #eb5c20;
		letter-spacing: 2rpx;
		line-height: 66rpx;
	}
	
	.coulumdetail-selected{
		flex: 1;
		text-align: center;
		background-color: #eb5c20;
		color: #eb5c20;
		letter-spacing: 2rpx;
		line-height: 66rpx;
	}

	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 16upx;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
			position: relative;
		}
	}

	.meal-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: center;

		.meal-item {
			// flex: 1;
			// margin-left: 10rpx;
			font-size: 22rpx;
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			border-style: solid;
			border-width: 1rpx;
			border-color: #eb5c20;
			color: #eb5c20;
		}

		.mealItem {
			// flex: 1;
			// margin-left: 10rpx;
			font-size: 22rpx;
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			background-color: #eb5c20;
			color: #fffff
		}

		.meal-item-selected {
			font-size: 22rpx;
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			background-color: #eb5c20;
			color: #ffffff;
		}

		.meal-item2 {
			font-size: 24rpx;
			color: #FFFFFF;
			height: 60rpx;
			line-height: 60rpx;
			width: 500rpx;
			background-color: #eb5c20;
			border-radius: 15rpx;
		}
	}

	.time-content {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		.start-time {
			padding-left: 60rpx;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.sel-starttime {
			width: 600rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			border-style: solid;
			border-width: 1rpx;
			border-color: #eb5c20;
			border-radius: 12rpx;
			text-align: center;
			color: #eb5c20;
			letter-spacing: 2rpx;
		}

		.end-time {
			padding-left: 60rpx;
			margin-top: 20rpx;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
		}
	}

	.typeName {
		font-weight: 900;
		font-size: 30rpx;
		color: #eb5c20;
		letter-spacing: 3rpx;
		margin-top: 20rpx;
	}

	.meal-desc-content {
		border-style: solid;
		border-width: 1rpx;
		border-color: #eb5c20;
		border-radius: 10rpx;

		.meal-desc-title {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			background-color: #eb5c20;
			border-radius: 9rpx;
			color: #ffffff;

		}

		.meal-desc {
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			text-align: center;
		}
	}
</style>
